    <template>
        <view class="pg-outer">
            <uni-navbar 
            :title="title" 
            :border="false"
            :fixed="true"
            :height="barHeight"
            :rightWidth="60"
            :leftWidth="60"
            titleStyle="color:#fff;fontSize:18px;"
            :bgColor="isWhiteAppBar ? '#FF5500' : 'transparent'"
            :placeholder="false"
            :autoBack="true"
            @clickRight="backEv"
            > 
            <view slot="left">
                <image v-if="!isMpAlipay && !isMpBaidu && !isMpToutiao" src="../../static/images/back_white2.png" class="back-icon" style="margin-left: -10rpx;"></image>
            </view>
            </uni-navbar>

            <scroll-view
            class="pg-scroll"
            :scroll-y="true"
            :refresher-enabled="false"
            :style="{paddingTop: headHt}"
            refresher-background="#ffffff"
        
            >
                <view class="fg-white" style="padding: 32rpx 0 10rpx 32rpx; margin-top: 0rpx;">
                    <view style="display: flex; align-items: center;" @tap ="toCoinDetail"> 
                        <image :src="staticHost + '/coin.png'" style="height: 40rpx; width: 40rpx;margin-right: 12rpx;"> </image>
                        <text class="text-style">金币余额</text>
                        <image :src="staticHost + '/arrow_r_grey.png'" style="height: 24rpx; width: 24rpx;margin-left: 12rpx;"></image>
                    </view>
                    <view class="box-1"> 
                        <text class="text-1">{{golds}}</text>
                        <text class="text-2">金币</text>
                        <view class="box-2"> 
                            <text class="text-3">{{amount/100}} </text>
                            <text class="text-4">元</text>
                        </view>
                    </view>
                </view>
                <view class="fg-white box-3">
                    <image class="img-alipay" :src=" staticHost + '/wf_zfb.png'"></image>
                    <view class="box-4"> 
                        <view class="text-style">支付宝 </view>
                        <view class="text-5" v-if="!accoutNo">请绑定支付宝</view>
                        <view class="text-5">{{accoutNo}}</view>
                    </view>
                    
                    <view  v-if="accountStatus !=1" class="btn-bind" @tap ="bindAlipay">{{bindName}}</view>
                </view>

                <view class="fg-white">
                    <view class="text-style text-6">提现金额</view>
                    <view class="box-5"> 
                      <view class="box-item-ly" v-for="(item,index) in drawMoneyList" :key="item.id" @tap="moneyItemOnclick(index,item)"> 

                        <view v-if="item.txFlag" class="receive-box">已提</view>
                        <!-- <view class="box-lock" v-if="item.locked == 1">
                            <image class="img-lock" :src="staticHost + '/wf_lock.png'" ></image>
                            <text class="text" >待解锁</text>
                        </view> -->
                        <view class="box-lock" v-if="golds >= item.golds">
                            <text class="text" >{{ computeItemState(item) }}</text>
                        </view>
                    
                        <view :class="['box-item', moneyPosition == index?'active':'']"> 
                             <view class="box-money"> 
                                <text class="money">{{item.amount/100}}</text>
                                <text class="unit"> 元</text>
                             </view>
                        </view>
                      </view>  
                      
                    </view>
                </view>

                <view class="text-style pg-space" style="margin-top: 40rpx; margin-bottom: 16rpx;">金币提现规则说明：</view>
                <view v-for="item in drawTipArray" :key="item" class="pg-space text-tip"  >{{item}}</view>
                 <view style="height: 100rpx;"></view>
            </scroll-view>
            <view class="pg-bottom">
                <view class="btn" @tap="sureClick">立即提现</view>
            </view> 
            <WfCommonPop
             v-if="isTip" 
             v-model="isTip" 
             :config="tipConfig"
             @hideEv="okEv"
            >
           </WfCommonPop>
        </view>
        
    </template>
    <script>
    
    import { staticHost } from '@/setting';
    import { isMpAlipay , isMpBaidu, isMpToutiao} from '@/utils/platform';
    import statusBarInfo from '@/pages/welfare/mixins/statusBarInfo'
    import {queryMoneyDetail,applyTx, SignNew} from '@/pages/welfare/api/index';
    import WfCommonPop from '@/pages/welfare/components/WfCommonPop'

    export default {
        mixins: [ statusBarInfo ],
        data(){
            return{
                staticHost,
                title:"提现",
                isWhiteAppBar: false,
                isMpAlipay,
                isMpBaidu,
                isMpToutiao,
                drawTipArray:[],
                golds: 0,
                amount:0,
                accoutName:"",
                accoutNo:"",
                txTimes: 0,
                //是否已认证 已认证不可以修改 -1未绑定 0已输入 1已认证
                accountStatus:-1,
                bindName:'',
                drawMoneyList:[],
                moneyPosition:-1,
                //提现金额ID
                configId:-1,
                isTip:false,
                tipConfig:{
                    title:'提现解锁',
                    content: "您需要提现一次上一等级的金额后，才能解锁此金额。",
                    isConfirm: false,
                    cancelBtnTxt: "取消",
                    btnTxt: "好的，我知道了！"
                }
            }
        },
        components: {
            WfCommonPop
        },
        onShow(){
            this.getMoneyDetail()
        },
        methods:{
            computeItemState(item) {
                if (this.golds >= item.golds) {
                    if (this.txTimes) {
                        return '明日还可提'
                    } else {
                        return '今日可提现'
                    }
                }
                return ''
            },
            bindAlipay(){
                console.log("bindAlipay==="+this.accountStatus )
                if(this.accountStatus != 1){
                    let url = '/pages/welfare/bindAlipay?accoutName='+this.accoutName+'&accoutNo='+this.accoutNo
                    this.$navigateTo(url)
                }
                
            },
            getMoneyDetail(){
                queryMoneyDetail().then(res =>{
                    if(res.code == 200){
                        let data = res.data
                        let rule = data.rule
                        let txTimes = data.txTimes || 0;
                        this.drawTipArray =[]
                        if(rule){
                             if(rule.indexOf("\n")!=-1){
                                let tipList = rule.split("\n")
                                this.drawTipArray.push(...tipList)
                             }else{
                                this.drawTipArray.push(rule)
                             }
                        }
                        let userPayAccount = data.userPayAccoutDto
                        if(userPayAccount){
                            this.setData({
                                accoutName:userPayAccount.accoutName,
                                accoutNo:userPayAccount.accoutNo,
                                accountStatus:userPayAccount.status,
                            })
                        }
                        let bindName = "绑定"
                        if(this.accountStatus == 0){
                            bindName = '重新绑定'
                        }
                        this.setData({
                            txTimes,
                            drawTipArray:this.drawTipArray,
                            drawMoneyList:data.signGrouptxconfigs,
                            golds:data.golds,
                            amount:data.amount,
                            bindName:bindName
                        })
                    }
                })
            },
            moneyItemOnclick(index,item){
                // if(item.locked == 1){
                //    let conifg ={
                //       title:'提现解锁',
                //      content: "您需要提现一次上一等级的金额后，才能解锁此金额。",
                //      isConfirm: false,
                //      cancelBtnTxt: "取消",
                //      btnTxt: "好的，我知道了！"
                //  }
                //  this.setData({
                //     isTip:true,
                //       tipConfig: conifg,
                //  })
                //   return
                // }
                this.setData({
                 moneyPosition:index,
                 configId:item.id,
                })
            },
            okEv() {
                console.log('zzeee', this.tipConfig)
                if (this.tipConfig && this.tipConfig.btnTxt == "领取更多金币红包") {
                    this.isTip = false;
                    // 签到并跳转
                    SignNew({}).then(res => {
                        if (res.code == 200) {
                            if(res.cg) {
                                this.$navigateBack()
                            } else if (res.data.id) {
                                this.$navigateTo('/pages/welfare/signCenter?signId=' + res.data.id);
                            }
                        }
                    })
                }
            },
            sureClick(){
               if(!this.accoutName || !this.accoutNo){
                   this.$showToast('请先绑定支付宝账号')
                   return
               }
               if(this.configId <= 0){
                  this.$showToast('请选择提现金额')
                  return
               }
               let parms = {
                    "configId":this.configId,
                }
              applyTx(parms).then(res =>{
                if(res.code == 200 && res.data){
                    let { waited, success, error} = res.data;
                    
                    let conifg;
                    if (success) {
                        if (waited) {
                            conifg = {
                                title:'温馨提示',
                                content: "您的提现申请已提交，审核通过后将于1个工作日内到账。",
                                isConfirm: false,
                                btnTxt: "好的，我知道了！"
                            }
                        } else {
                            conifg = {
                                title:'温馨提示',
                                content: "您已提现成功，提现金额已自动到账支付宝，明日最少还可提现0.3元。",
                                isConfirm: false,
                                btnTxt: "领取更多金币红包"
                            }
                        }
                    } else if(error) {
                        conifg = {
                            title:'温馨提示',
                            content: error,
                            isConfirm: false,
                            btnTxt: "好的，我知道了！"
                        }
                    }
                    
                    if (conifg) {
                        this.setData({
                            isTip:true,
                            tipConfig: conifg,
                        })
                    }
                    
                    this.getMoneyDetail()
                }
              })
            },
            toCoinDetail(){
                this.$navigateTo('/pages/welfare/coinDetails')
            }
        }
    }
    </script>
    <style lang="scss" scoped>
    .pg-outer {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;   
        background: linear-gradient(180deg,#f50,rgba(255,68,0,0));

    }
    .pg-scroll{
        flex: 1;
        overflow: hidden;
        width: 100%;
    }
    .text-style{
        font-weight: bold;
        color: #1A1B1E;
        font-size: 32rpx;
    }
    .text-tip{
        color: #7B828E;
        font-size: 28rpx;
    }
    .pg-space{
        margin:0 48rpx;
    }
    .fg-white{
        margin: 32rpx 32rpx 0 32rpx;
        background-color: #fff;
        border-radius: 32rpx;
        box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(77,14,0,0.2);
    }
    .box-1{
        display: flex;
        align-items: flex-end;
        margin-top: 10rpx;

    }
    .text-1{
        color: #F65352;
        font-size: 80rpx;

    }
    .text-2{
        color: #1A1B1E;
        font-size: 24rpx;
        font-weight: bold;
        margin:0 24rpx 24rpx 12rpx;
    }
    .box-2{
        display: flex;
        align-items: flex-end;
        background: rgba(246,83,82,0.16);
        padding: 0rpx 16rpx;
        border-radius: 28rpx 28rpx 28rpx 0rpx;
        margin-bottom: 24rpx;
    }
    .text-3{
        color: #F65352;
        font-size: 40rpx;
        font-weight: bold;
    }
    .text-4{
        color: #F65352;
        font-size: 24rpx;
        font-weight: bold;
        margin-bottom: 8rpx;
    }
    .text-5{
        color: #7B828E;
        font-size: 24rpx;
        margin-top: 12rpx;
       
    }
    .text-6{
       padding: 32rpx 0 10rpx 32rpx;
       
    }
    .box-3{
        padding: 0 32rpx; 
        height: 160rpx;
        display: flex;
        align-items: center;
    }
    .img-alipay{
        height: 96rpx;
        width: 96rpx;
    }
    .box-4{
      margin-left: 16rpx;
      flex: 1;
    }
    .btn-bind{
        height: 64rpx;
        width: 144rpx;
        text-align: center;
        color: #fff;
        font-size: 24rpx;
        line-height: 64rpx;
        border-radius: 32rpx;
        background-color: #F65352;
    }
    .box-5{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 0 10rpx 32rpx 32rpx;
    }
    .box-item-ly{
        height: 160rpx;
        width: calc(33.33% - 22rpx);
        margin: 22rpx 22rpx 0 0 ;
        position: relative;
        .box-item{
            height: 100%;
            width: 100%;
            background-color: #F8EDED;
            border: 2rpx solid #fff;
            border-radius: 24rpx;
            position: relative;
            &.active{
                border: 2rpx solid #FF7733;
            }
            .box-money{
                display: flex;
                align-items: flex-end;
                left: 50%;
                transform: translate(-50%,-50%);
                position: absolute;
                top: 64rpx;
                .money{
                    color: #F65352;
                    font-size: 48rpx;
                   
                }
                .unit{
                    color: #F65352;
                    font-size: 28rpx;
                    margin-bottom: 10rpx;
                    font-weight: bold;
                }
            }
         }
         .receive-box {
            position: absolute;
            top: 1px;
            right: 1px;
            height: 40rpx;
            padding: 0 8px;
            background: #F65352;
            color: #fff;
            border-radius: 20rpx;
            z-index: 3;
            font-size: 20rpx;
            display: flex;
            align-items: center;
         }
         .box-lock{
            height: 36rpx;
            width: 136rpx; 
            background: rgba(246,83,82,0.16);
            border-radius: 12rpx 12rpx 0rpx 0rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            left: 50%;
            transform: translate(-50%,-50%);
            position: absolute;
            top: 142rpx;
            z-index: 99;
            .img-lock{
                height: 24rpx;
                width: 20rpx;
            }
            .text{
                color: #F65352;
                font-size: 24rpx;
                margin-left: 6rpx;
            }
         }
    }
    
  </style>